{% extends "admin/base.html" %}

{% block title %}文章管理 - 万岛潜水管理后台{% endblock %}

{% block page_title %}文章管理{% endblock %}

{% block page_actions %}
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPostModal">
    <i class="fas fa-plus me-1"></i>添加文章
</button>
{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h5 class="mb-0">文章列表</h5>
            </div>
            <div class="col-md-6">
                <form class="d-flex" method="get">
                    <input class="form-control me-2" type="search" name="search" placeholder="搜索文章标题..." value="{{ request.args.get('search', '') }}">
                    <select class="form-select me-2" name="filter" style="width: auto;">
                        <option value="all" {% if request.args.get('filter') == 'all' %}selected{% endif %}>全部分类</option>
                        <option value="knowledge" {% if request.args.get('filter') == 'knowledge' %}selected{% endif %}>潜水知识</option>
                        <option value="news" {% if request.args.get('filter') == 'news' %}selected{% endif %}>新闻动态</option>
                        <option value="story" {% if request.args.get('filter') == 'story' %}selected{% endif %}>潜水故事</option>
                    </select>
                    <button class="btn btn-outline-primary" type="submit">搜索</button>
                </form>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>标题</th>
                        <th>分类</th>
                        <th>发布日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% if posts %}
                        {% for post in posts %}
                            <tr>
                                <td>{{ post.id }}</td>
                                <td>{{ post.title }}</td>
                                <td>
                                    <span class="badge bg-primary">{{ post.category }}</span>
                                </td>
                                <td>{{ post.created_at.strftime('%Y-%m-%d') }}</td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a href="{{ url_for('main.post_detail', id=post.id) }}" target="_blank" class="btn btn-info">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editPostModal{{ post.id }}">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <a href="{{ url_for('main.admin_delete_post', id=post.id) }}" class="btn btn-danger" onclick="return confirm('确定要删除这篇文章吗？')">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            
                            <!-- 编辑文章模态框 -->
                            <div class="modal fade" id="editPostModal{{ post.id }}" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">编辑文章</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <form method="post" action="{{ url_for('main.admin_edit_post', id=post.id) }}" enctype="multipart/form-data">
                                            <div class="modal-body">
                                                <div class="mb-3">
                                                    <label for="title{{ post.id }}" class="form-label">标题</label>
                                                    <input type="text" class="form-control" id="title{{ post.id }}" name="title" value="{{ post.title }}" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="category{{ post.id }}" class="form-label">分类</label>
                                                    <select class="form-select" id="category{{ post.id }}" name="category" required>
                                                        <option value="潜水知识" {% if post.category == '潜水知识' %}selected{% endif %}>潜水知识</option>
                                                        <option value="新闻动态" {% if post.category == '新闻动态' %}selected{% endif %}>新闻动态</option>
                                                        <option value="潜水故事" {% if post.category == '潜水故事' %}selected{% endif %}>潜水故事</option>
                                                    </select>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="content{{ post.id }}" class="form-label">内容</label>
                                                    <textarea class="form-control" id="content{{ post.id }}" name="content" rows="10" required>{{ post.content }}</textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="image{{ post.id }}" class="form-label">封面图片</label>
                                                    <input type="file" class="form-control" id="image{{ post.id }}" name="image">
                                                    {% if post.image %}
                                                        <div class="mt-2">
                                                            <img src="{{ url_for('static', filename='uploads/' + post.image) }}" alt="{{ post.title }}" class="img-thumbnail" style="max-height: 100px;">
                                                        </div>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                                <button type="submit" class="btn btn-primary">保存修改</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="5" class="text-center">暂无文章</td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        {% if pagination and pagination.pages > 1 %}
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if pagination.has_prev %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('main.admin_posts', page=pagination.prev_num, search=request.args.get('search', ''), filter=request.args.get('filter', 'all')) }}">上一页</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1">上一页</a>
                    </li>
                {% endif %}
                
                {% for page in pagination.iter_pages() %}
                    {% if page %}
                        {% if page != pagination.page %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('main.admin_posts', page=page, search=request.args.get('search', ''), filter=request.args.get('filter', 'all')) }}">{{ page }}</a>
                            </li>
                        {% else %}
                            <li class="page-item active">
                                <a class="page-link" href="#">{{ page }}</a>
                            </li>
                        {% endif %}
                    {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#">...</a>
                        </li>
                    {% endif %}
                {% endfor %}
                
                {% if pagination.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('main.admin_posts', page=pagination.next_num, search=request.args.get('search', ''), filter=request.args.get('filter', 'all')) }}">下一页</a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1">下一页</a>
                    </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
    </div>
</div>

<!-- 添加文章模态框 -->
<div class="modal fade" id="addPostModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加文章</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{{ url_for('main.admin_add_post') }}" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="title" class="form-label">标题</label>
                        <input type="text" class="form-control" id="title" name="title" required>
                    </div>
                    <div class="mb-3">
                        <label for="category" class="form-label">分类</label>
                        <select class="form-select" id="category" name="category" required>
                            <option value="潜水知识">潜水知识</option>
                            <option value="新闻动态">新闻动态</option>
                            <option value="潜水故事">潜水故事</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="content" class="form-label">内容</label>
                        <textarea class="form-control" id="content" name="content" rows="10" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="image" class="form-label">封面图片</label>
                        <input type="file" class="form-control" id="image" name="image">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">添加文章</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 可以添加富文本编辑器初始化代码
    document.addEventListener('DOMContentLoaded', function() {
        // 这里可以初始化富文本编辑器
    });
</script>
{% endblock %} 